<template>
    <div>
        <div class="right-body">
            <div class="operation-layout">
                <div class="operation-list">
                    <ul>
                        <li class="active">
                            <a>服务管理</a>
                            <div class="after"></div>
                        </li>
                    </ul>
                    <div class="Management-ul">
                        <label  v-if="detailObj.onlineStatus == 0">您已在线时长：<span>{{detailObj.min + detailObj.unit}}</span></label>
                        <a class="key" v-if="detailObj.onlineStatus == 0" @click="updateData(1)">一键下线</a>
                        <a class="key" v-if="detailObj.onlineStatus == 1 && serviceList.length > 0" @click="updateData(0)">一键上线</a>
                        <a class="apply" @click="apply()">申请服务</a>
                    </div>
                </div>
            </div>
            <!--  Management begin -->
            <div class="Management-view-layout">
                <div class="Management" v-for="(item,index) in serviceList" :key="index">
                    <div class="Management-user">
                        <img :src="$imgPath(item.serviceLogo)">
                    </div>
                    <div class="Management-list">
                        <div>
                            <label class="Management-name">服务名称</label>
                            <label class="Management-game">{{item.serviceName}}</label>
                        </div>
                        <div>
                            <label class="Management-name">服务段位</label>
                            <label class="Management-LV">
                                <span>{{item.division}}</span>
                            </label>
                        </div>
                        <div>
                            <label class="Management-name">服务价位</label>
                            <label class="Management-pic">￥<span>{{item.price}}</span>/{{item.priceUnit}}</label>
                        </div>
                    </div>

                    <div class="Management-start">
                        <div class="start">
                            <ul>
                                <!-- <li class="active"></li>
                                <li class="active"></li>
                                <li class="active"></li>
                                <li></li>
                                <li></li> -->
                                <Rate disabled v-model="item.starNum" />
                            </ul>
                        </div>
                        <div class="order">
                            <span>接单:{{item.num}}次</span>
                        </div>
                    </div>

                    <div class="Management-open">
                        <a class="open" v-if="item.onlineStatus == 1" @click="hidderService(item)"><i></i>开启</a>
                        <a class="close" v-if="item.onlineStatus == 0" @click="hidderService(item)"><i></i>关闭</a>
                    </div>
                </div>
                <!--page  begin-->
                <!-- <div class="page-layout">
                    <ul class="page">
                        <li><a class="active">1</a></li>
                        <li><a>2</a></li>
                        <li><a>3</a></li>
                        <li><a>4</a></li>
                        <li><a>5</a></li>
                        <li><a>6</a></li>
                        <li><a>7</a></li>
                        <li><a>8</a></li>
                        <li>...</li>
                        <li><a>288</a></li>
                        <li><a>下一页</a></li>
                        <li>共288页</li>
                        <li>到第<input type="text">页</li>
                        <li><a type="button">确定</a></li>
                    </ul>
                </div> -->
                <!--page  end-->
            </div>
            <!--  Management end -->
        </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
export default {
    props:['serviceList','detailObj'],
    data(){
        return{
            valueDisabled:2
        }
    },
    methods:{
        // 隐藏服务
        hidderService(item){
            let onlineStatus = ''
            if(item.onlineStatus == 0) {
                onlineStatus = 1
            }else{
                onlineStatus = 0
            }
            let parmes = {
                onlineStatus:onlineStatus,
                serviceId:item.serviceId
            }
            apiHttp.apiCenter.updateOnlineStatus(this.$qs.stringify(parmes),resp => {
                if(resp.code == 200){
                    item.onlineStatus = onlineStatus
                }
            })
        },
        // 一键上下线
        updateData(type){
            let params = {
                onlineStatus:type
            }
            apiHttp.apiCenter.updateDataOnlineStatus(this.$qs.stringify(params),resp=>{
                this.$Message.success('操作成功')
                this.$emit('serviceZt')
            })
        },
        // 申请服务
        apply(){
            this.$router.push({
                name:'applyForService'
            })
            localStorage.setItem('tabIndex','4')
        }
    }
}
</script>

